<template>
  <div class="loginBox">
    <div class="login_title">
      <span class="mr" @click="swi=0">验证码登录</span>
      <span @click="swi=1">密码登录</span>
    </div>

    <!-- 验证码登录 -->
    <div class="main" v-if="swi===0">
      <div class="con">
        <label for="username">手机号</label>
        <input type="tel" v-model="phonenumber" @blur="verify()" />
        <label for="password">验证码</label>
        <input type="text" v-model="code" />
        <span class="getCode" @click="sendcode">获取验证码</span>
      </div>
      <van-button
        size="large"
        round
        type="info"
        :color="(code&&phonenumber)?col[0]:col[1]"
        :disabled="!(code&&phonenumber)"
        @click="loginByCode"
      >登录</van-button>
    </div>

    <!-- 密码登录 -->
    <div class="main" v-if="swi===1">
      <div class="con">
        <label for="username">手机号</label>
        <input type="tel" v-model="phonenumberOfpsw" />
        <label for="password">密码</label>
        <input type="password" v-model="password" />
      </div>
      <van-button
        size="large"
        round
        type="info"
        :color="(password&&phonenumberOfpsw)?col[0]:col[1]"
        :disabled="!(password&&phonenumberOfpsw)"
        @click="loginByPsw"
      >登录</van-button>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import Api from "../Api";
export default {
  data: function() {
    return {
      swi: 0,
      col: ["linear-gradient(to right,#FF8300,#FF5700)", "#969696"], //登录按钮样式
      //验证码登录
      phonenumber: "",
      sign: false, //true:该用户可以注册,false:用户已存在
      phonepass: false, //验证手机号码格式； true：手机格式正确 false:手机格式错误
      getcode: false, //验证码发送状态；  true：发送成功 false:发送失败
      allpass: false, //验证表单；true:全部验证通过,false:验证失败
      code: "", //验证码
      //密码登录
      phonenumberOfpsw: "",
      password: ""
    };
  },
  methods: {
    /*

       @验证码登录

    */
    //验证用户是否存在
    async verify() {
      await Api.my
        .get("/users", {
          phonenumber: this.phonenumber
        })
        .then(res => {
          if (res.data.code === 1) {
            this.sign = true;
          } else if (res.data.code === 0) {
            this.sign = false;
          }
        });
    },
    //验证手机号码格式
    async sendcode() {
      let reg = /^1[0-9]{10}$/;
      this.phonepass = reg.test(this.phonenumber);
      if (this.phonepass) {
        //发送验证码
        await Api.my
          .post(
            "/sendcode/code",
            qs.stringify({
              phone: this.phonenumber
            })
          )
          .then(res => {
            if (res.data.code === 1) {
              window.alert("发送成功");
            } else {
              window.alert("网络出现问题啦！");
            }
          });
      } else {
        this.allpass = false;
        window.alert("手机格式不正确");
      }
    },
    //验证码校验
    async loginByCode() {
      await Api.my
        .post(
          "/sendcode/verifycode",
          qs.stringify({
            phone: this.phonenumber,
            code: this.code
          })
        )
        .then(res => {
          if (res.data.code === 1) {
            this.allpass = true;
            this.reg(res.data);
          } else {
            this.allpass = false;
          }
        });
    },

    /*
    
         @密码登录
    
    */
    async loginByPsw() {
      await Api.my
        .post(
          "/users/login",
          qs.stringify({
            phonenumber: this.phonenumberOfpsw,
            password: this.password,
            keep: true
          })
        )
        .then(res => {
          if (res.data.code === 1) {
            let user = res.data;
            user.phone = this.phonenumberOfpsw;
            this.login(user);
          } else {
            window.alert("登录失败");
          }
        });
    },

    //注册
    async reg(data) {
      //全部验证通过
      if (this.allpass) {
        this.login(data);
        if (this.sign) {
          //注册
          await Api.my.post(
            "/users/adduser",
            qs.stringify({
              phonenumber: this.phonenumber,
              username: this.phonenumber,
              password: this.password
            })
          );
        }
      } else {
        //验证失败
        window.alert("登录失败");
      }
    },
    //登录
    login(user) {
      //token写入本地
      localStorage.setItem("Authorization", user.authorization);
      this.$store.commit("login", user);
      //登录成功后跳转
      let redirectUrl = this.$route.query.redirectUrl || "/mine";
      // window.console.log(this.$route);
      this.$router.push(redirectUrl);
    }
  }
};
</script>

<style lang="scss" scoped>
$color: #979797;
.loginBox {
  padding: 0.72rem 1.013333rem 0;
}
.login_title {
  font-size: 0.533333rem;
}
.mr {
  margin-right: 1.9rem;
}
.con {
  position: relative;
  font-size: 0.32rem;
}
input {
  display: block;
  border: none;
  border-bottom: 1px solid $color;
  width: 100%;
  margin-top: 0.96rem;
}
.getCode {
  position: absolute;
  right: 0;
  bottom: 0.133333rem;
  color: #ff5700;
}
label {
  margin-top: 0.96rem;
  display: block;
}
.van-button {
  margin-top: 1.066667rem;
}

.act {
  display: block;
}
</style>